<template>
	<view class="container" v-if="showFlag">
		<view class="info borderBottom1">
			<view class="myHead">
				<text>头像</text>
				<view class="">
					<image @click="updateImg" :src="info.image == '' ? '../../static/img/index/12.JPG' : info.image" mode=""></image>
					<image src="../../static/img/personCenter/right.png"></image>
				</view>
			</view>
		</view>
		<view class="info teacherMsg borderBottom1">
			<text>姓名</text>
			<input type="text" v-model="info.name" maxlength="6" placeholder="请输入姓名" />
		</view>
		<view class="info teacherMsg borderBottom1">
			<text>电话</text>
			<input type="number" v-model="info.phone" maxlength="11" placeholder="请输入联系方式" />
		</view>
		<view class="info teacherMsg borderBottom10">
			<text>驾龄</text>
			<input type="text" v-model="info.drive_age" maxlength="4" placeholder="请输入你的驾龄" />
		</view>
		<evan-checkbox-group>
			<view class="info label borderBottom10">
				<text>我的标签:</text>
				<view class="radio">
					<u-checkbox-group>
						<view class="" style="width: 500rpx;display: flex;flex-wrap: wrap;padding-bottom: 20rpx;margin-top: -20rpx;">
							<u-checkbox
								style="margin-top: 20rpx;margin-right: 20rpx;"
								:label-disabled="false"
								shape="circle"
								v-for="(item, index) in skillList"
								:key="index"
								v-model="item.state"
								:name="item.title"
							>
								{{ item.title }}
							</u-checkbox>
						</view>
					</u-checkbox-group>
				</view>
			</view>
		</evan-checkbox-group>
		<view class="info teacherMsg borderBottom1"><text style="font-size: 30rpx;font-weight: bold;">车辆信息</text></view>
		<view class="info teacherMsg borderBottom1">
			<text>车辆型号</text>
			<input type="text" v-model="info.car_model" maxlength="4" placeholder="请输入车辆型号" />
		</view>
		<view class="info teacherMsg borderBottom1">
			<text>车牌号</text>
			<input type="text" @tap="plateShow = true" v-model.trim="info.car_number" disabled="true" placeholder="请输入车牌号" />
			<plate-input v-if="plateShow" :plate="info.car_number" @export="setPlate" @close="plateShow = false"></plate-input>
		</view>
		<view class="info msg borderBottom10">
			<text>车检信息</text>
			<textarea v-show="plateShow == false" type="text" v-model="info.car_check" maxlength="300" auto-height placeholder="请输入车检信息" />
		</view>
		<view class="info msg borderBottom10">
			<text>车辆照片</text>
			<view class="imgListArea"><an-upload-img :imgs="carImg" @getImgArr="getImgs" @delArr="delArr" time="200" :textDescribe="textDescribeValue"></an-upload-img></view>
		</view>
		<view class="footer"><view class="result" @click="saveHandle">确定</view></view>
	</view>
</template>

<script>
import { uploadFile } from '@/api/upload/upload.js';
import { teacherInfo, update } from '@/api/teacher/teacherInfo/teacherInfo.js';
import evanCheckbox from '@/components/evan-checkbox/evan-checkbox.vue';
import EvanCheckboxGroup from '@/components/evan-checkbox/evan-checkbox-group.vue';
import plateInput from '@/components/uni-plate-input/uni-plate-input.vue';
import anUploadImg from '@/components/an-uploadImg/an-uploadImg';
export default {
	components: {
		anUploadImg,
		plateInput,
		evanCheckbox,
		EvanCheckboxGroup
	},
	data() {
		return {
			imgList: '',
			info: {},
			skillList: [],
			textDescribeValue: '添加照片',
			carImg: [],
			beforePeripheryImg: [],
			beforeImg:[],
			plateNo: '',
			plateShow: false,
			showFlag: false,
			showBox: false
		};
	},
	async mounted() {
		let res = await teacherInfo();
		this.carImg = res.data.coach.car_images.split(',');
		this.info = res.data.coach;
		res.data.tags.forEach(item => {
			if (res.data.coach.tagids.indexOf(item.id) != -1) {
				item.state = true;
			} else {
				item.state = false;
			}
		});
		this.skillList = res.data.tags;
		this.showFlag = true;
	},
	updated() {
		// console.log(this.carImg);
		// console.log(this.beforePeripheryImg);
	},
	methods: {
		updateImg() {
			//更新用户图片
			uni.chooseImage({
				count: 6, // 最多可以选择的图片张数，默认9
				sizeType: ['original', 'compressed'], //original 原图，compressed 压缩图，默认二者都有
				sourceType: ['album', 'camera'], //album 从相册选图，camera 使用相机，默认二者都有。如需直接开相机或直接选相册，请只使用一个选项
				success: res => {
					this.info.image = res.tempFiles[0].path;
				}
			});
		},
		setPlate(plate) {
			if (plate.length >= 7) this.info.car_number = plate;
			this.plateShow = false;
		},
		getImgs(val) {
			this.beforePeripheryImg = val;
		},
		delArr(index) {
			if (this.carImg.length > 0) {
				this.carImg.splice(index, 1);
			}
		},
		async uploadImg(val, name) {
			if (name == 1) {
				for (let i = 0; i < val.length; i++) {
					if (val[i].indexOf('/uploads') !== -1) {
						this.beforeImg.push(val[i])
					} else {
						let res = await uploadFile(val[i]);
						// this.carImg.push(JSON.parse(res).data.url);
						this.beforeImg.push(JSON.parse(res).data.url)
					}
				}
			} else {
				if (val.indexOf('/uploads') !== -1) {
				} else {
					let res = await uploadFile(val);
					this.info.image = JSON.parse(res).data.url;
				}
			}
		},
		async saveHandle() {
			uni.showLoading({
				title: '请稍候',
				mask:true
			});
			let arr = [];
			this.skillList.forEach((item, index) => {
				if (item.state) {
					arr.push(item.id);
				}
			});
			let imgArr = '';
			await this.uploadImg(this.beforePeripheryImg, 1);
			await this.uploadImg(this.info.image, 2);
			if(!this.beforeImg.length){
				imgArr=this.carImg
			}else{
				imgArr = this.beforeImg.join(',');
				
			}
			this.info.tagids = arr.join(',');
			let res = await update(this.info, imgArr);
			uni.hideLoading();
			if (res.code == 1) {
				uni.showToast({
					title:res.msg
				});
				setTimeout(() => {
					uni.reLaunch({
						url: '/pages/teacher/teacherCenter'
					});
				}, 1500);
			} else{
				this.beforeImg=[];
				uni.showToast({
					title: res.msg,
					icon: 'none'
				});
			}
		}
	}
};
</script>

<style lang="scss">
@import './css/teacherInfo.scss';
</style>
